<template>
  <div class="bg-gray-50 rounded-lg shadow-lg" style="min-height: 100vh">
    <div>
      <van-image
          :src="dataInfo.information.backgroundImage"
          width="100%"
          height="192px"
          fit="cover"
          class="rounded-t-lg"
      />
    </div>
    <div class="relative -mt-10 ml-2 mr-2 bg-white rounded-xl z-5 shadow-md">
      <div class="flex flex-col items-center justify-center pb-4 pl-4 pr-4" style="width: 100%">
        <div class="relative -mt-10 pb-4">
          <van-image
              :src="dataInfo.headimgurl"
              width="100"
              height="100"
              fit="cover"
              round
              class="border-4 border-white"
          />
        </div>
        <span class="font-bold text-lg pb-1" style="color:#333333">{{ dataInfo.name }}</span>
        <span class="text-sm text-gray-400 pb-1" style="color:#333333">{{ dataInfo.position }}</span>
        <span class="text-sm text-gray-400 pb-1" style="color:#666666">{{ dataInfo.company }}</span>
        <span class="text-sm text-gray-400 pt-2" style="color:#999999;text-indent: 2em;">{{ dataInfo.information.desc }}</span>
      </div>
    </div>
    <div class="bg-white pt-4 pb-4 mt-4">
      <van-row gutter="20">
        <van-col span="10" class="flex items-center justify-start pl-2">
          <van-image
              :src="dataInfo.headimgurl"
              width="22"
              height="22"
              fit="cover"
              round
              class="mr-2"
          />
          <van-icon size="22" color="#bfbfbf" name="eye-o"  class="pr-1"/>
          <span class="mr-2" style="color: #bfbfbf"> {{ dataInfo.view }} </span>
          <van-icon color="#bfbfbf" size="22" name="good-job-o" />
          <span  class="ml-1" style="color: #bfbfbf"> {{ dataInfo.likes }} </span>
        </van-col>
        <van-col span="6"></van-col>
        <van-col span="8" class="flex items-center justify-end text-gray-400">
          <van-icon @click="likes" color="#3b8cff" size="22" name="good-job-o" class="pr-4"/>
        </van-col>
      </van-row>
    </div>

    <van-row class="bg-white p-4 mt-4 mb-4" :gutter="[0, 5]">
      <van-col span="24">
        <h6 class="text-base mb-2">我的企业</h6>
      </van-col>
      <van-col span="6">
        <div class="flex items-center justify-center h-16">
          <van-image :src="dataInfo.information.logo" width="40" class="rounded-t-lg"/>
        </div>
      </van-col>
      <van-col span="18">
        <div class="flex flex-col  h-16">
          <span class="font-sans pb-2" style="color:#666666">{{ dataInfo.company }}</span>
          <div>
            <van-button type="default" icon="home-o" class="mr-4 w-30 h-8" @click="goToWebsite">进入官网</van-button>
            <van-button type="default" icon="chat-o" class="w-30 h-8" @click="subscribeWechat">关注公众号</van-button>
          </div>
        </div>
      </van-col>
    </van-row>

    <van-row>
      <van-col span="24" class="bg-white pt-4 pl-4 pr-4 mt-4">
        <h6 class="text-base mb-2">公司动态</h6>
      </van-col>
      <van-col span="24">
        <div style="min-height: 100vh" class="pb-10">
          <aggList :customerUuid="customerUuid" :aggListUuid="aggListUuid" :showSearch="false"></aggList>
        </div>
      </van-col>
    </van-row>


    <van-tabbar active-color="#ee0a24" class="flex items-center justify-center">
      <van-button class="m-2" type="primary" icon="chat-o" plain block @click="contactUs">联系我</van-button>
      <van-button class="m-2" type="primary" icon="share-o" block @click="shareCard">分享名片</van-button>
    </van-tabbar>

    <van-popup
        v-model:show="showContactUsPopup"
        round
        position="bottom"
        :style="{ height: '40%' }"
    >
      <van-row class="bg-white p-4 mt-4 mb-4" :gutter="[0, 20]">
        <van-col span="8" class="flex flex-col items-center justify-center">
          <div class="flex items-center justify-center w-14 h-14 border border-gray-100 rounded-xl" @click="callMobile">
            <van-icon size="24" class="font-bold" color="#1989FA" name="phone-o" />
          </div>
          <span class="text-xs pt-2" style="color:#646566;">拨打电话</span>
        </van-col>
        <van-col span="8" class="flex flex-col items-center justify-center">
          <div class="flex items-center justify-center w-14 h-14 border border-gray-100 rounded-xl" @click="goToAddress">
            <van-icon size="24" class="font-bold" color="#ee8255" name="location-o" />
          </div>
          <span class="text-xs pt-2" style="color:#646566;">地址导航</span>
        </van-col>

<!--        <van-col span="8" class="flex flex-col items-center justify-center">-->
<!--          <div class="flex items-center justify-center w-14 h-14 border border-gray-100 rounded-xl" @click="getAddress">-->
<!--            <van-icon size="24" class="font-bold" color="#ee8255" name="location-o" />-->
<!--          </div>-->
<!--          <span class="text-xs pt-2" style="color:#646566;">查看当前地址</span>-->
<!--        </van-col>-->

        <van-col span="8" class="flex flex-col  items-center justify-center">
          <div class="flex items-center justify-center w-14 h-14 border border-gray-100 rounded-xl" @click="copyMobile(dataInfo.mobile)">
            <van-icon size="24" class="font-bold" color="#1989FA" name="records-o"/>
          </div>
          <span class="text-xs pt-2" style="color:#646566;">存到通讯录</span>
        </van-col>
        <van-col span="8" class="flex flex-col  items-center justify-center">
          <div class="flex items-center justify-center w-14 h-14 border border-gray-100 rounded-xl" @click="addWork">
            <svg t="1720067030871" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3523" width="24" height="24">
              <path d="M657.003 737.28c-5.12 5.12-5.12 5.12-5.12 10.24s0 5.12 5.12 10.24c25.6 25.6 46.08 61.44 51.2 97.28 5.12 25.6 30.72 40.96 56.32 40.96 25.6-5.12 46.08-25.6 46.08-51.2s-20.48-51.2-46.08-51.2c-35.84-5.12-66.56-25.6-92.16-51.2 0-10.24-10.24-10.24-15.36-5.12z" fill="#FB6500" p-id="3524"></path>
              <path d="M872.043 655.36c-10.24 10.24-15.36 20.48-15.36 30.72-5.12 35.84-25.6 66.56-51.2 92.16-5.12 5.12-5.12 10.24-5.12 15.36s5.12 10.24 10.24 10.24 10.24 0 10.24-5.12c25.6-25.6 61.44-46.08 97.28-51.2 20.48-5.12 35.84-25.6 40.96-46.08 0-20.48-10.24-40.96-30.72-51.2-15.36-15.36-40.96-10.24-56.32 5.12z" fill="#0082EF" p-id="3525"></path>
              <path d="M723.563 506.88c-15.36 15.36-20.48 35.84-10.24 56.32 5.12 20.48 25.6 30.72 46.08 35.84 35.84 5.12 66.56 25.6 92.16 51.2 5.12 5.12 10.24 5.12 15.36 5.12s10.24-5.12 10.24-10.24 0-10.24-5.12-10.24c-25.6-25.6-46.08-61.44-51.2-97.28-5.12-20.48-20.48-30.72-35.84-35.84-30.72-15.36-46.08-10.24-61.44 5.12z" fill="#2DBC00" p-id="3526"></path>
              <path d="M697.963 588.8c-25.6 30.72-61.44 46.08-102.4 51.2-20.48 5.12-30.72 20.48-35.84 35.84-5.12 20.48 0 35.84 15.36 51.2s35.84 20.48 56.32 10.24c20.48-5.12 30.72-25.6 35.84-46.08 5.12-35.84 25.6-66.56 51.2-92.16 5.12-5.12 5.12-10.24 0-20.48-10.24 5.12-15.36 5.12-20.48 10.24z" fill="#FFCC00" p-id="3527"></path>
              <path d="M375.403 128c-92.16 10.24-179.2 51.2-240.64 117.76-25.6 25.6-46.08 51.2-61.44 81.92-46.08 92.16-40.96 204.8 20.48 291.84 15.36 25.6 46.08 56.32 71.68 81.92l-10.24 92.16v20.48c0 10.24 5.12 20.48 15.36 25.6s20.48 5.12 25.6 0l25.6-15.36 81.92-40.96c40.96 10.24 76.8 15.36 117.76 15.36 51.2 0 97.28-10.24 148.48-25.6-25.6-10.24-40.96-30.72-35.84-56.32-46.08 15.36-102.4 20.48-148.48 15.36h-10.24c-20.48 0-35.84-5.12-56.32-10.24-10.24-5.12-20.48 0-30.72 5.12L221.803 768h-10.24s-5.12 0-5.12-5.12v-10.24l5.12-10.24 5.12-20.48 5.12-20.48c5.12-10.24 0-25.6-10.24-30.72-25.6-20.48-51.2-40.96-66.56-71.68-46.08-66.56-51.2-158.72-15.36-230.4 15.36-35.84 30.72-56.32 51.2-76.8 51.2-51.2 122.88-87.04 199.68-92.16 25.6-5.12 56.32-5.12 81.92 0 76.8 10.24 148.48 40.96 199.68 97.28 20.48 20.48 35.84 40.96 46.08 66.56 15.36 30.72 25.6 66.56 25.6 102.4v10.24c25.6-20.48 51.2-15.36 66.56 0v5.12c5.12-51.2-5.12-102.4-30.72-148.48-15.36-30.72-35.84-61.44-56.32-81.92-66.56-66.56-148.48-107.52-240.64-117.76-30.72-5.12-61.44-5.12-97.28-5.12z" fill="#3970BA" p-id="3528"></path>
            </svg>
          </div>
          <span class="text-xs pt-2" style="color:#646566;">添加企业微信</span>
        </van-col>
      </van-row>
    </van-popup>

    <van-popup
        v-model:show="showSharePopup"
        round
        position="bottom"
        :style="{ height: '20%' }"
    >
      <van-row class="bg-white p-4 mt-4 mb-4" :gutter="[0, 20]">
        <van-col v-if="isWeChat" span="8" class="flex flex-col items-center justify-center">
          <div class="flex items-center justify-center w-14 h-14 border border-gray-100 rounded-xl" @click="shareWechat">
            <svg t="1720085768290" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5606" width="24" height="24">
              <path d="M683.058 364.695c11 0 22 1.016 32.943 1.976C686.564 230.064 538.896 128 370.681 128c-188.104 0.66-342.237 127.793-342.237 289.226 0 93.068 51.379 169.827 136.725 229.256L130.72 748.43l119.796-59.368c42.918 8.395 77.37 16.79 119.742 16.79 11 0 21.46-0.48 31.914-1.442a259.168 259.168 0 0 1-10.455-71.358c0.485-148.002 128.744-268.297 291.403-268.297l-0.06-0.06z m-184.113-91.992c25.99 0 42.913 16.79 42.913 42.575 0 25.188-16.923 42.579-42.913 42.579-25.45 0-51.38-16.85-51.38-42.58 0-25.784 25.93-42.574 51.38-42.574z m-239.544 85.154c-25.384 0-51.374-16.85-51.374-42.58 0-25.784 25.99-42.574 51.374-42.574 25.45 0 42.918 16.79 42.918 42.575 0 25.188-16.924 42.579-42.918 42.579z m736.155 271.655c0-135.647-136.725-246.527-290.983-246.527-162.655 0-290.918 110.88-290.918 246.527 0 136.128 128.263 246.587 290.918 246.587 33.972 0 68.423-8.395 102.818-16.85l93.809 50.973-25.93-84.677c68.907-51.93 120.286-119.815 120.286-196.033z m-385.275-42.58c-16.923 0-34.452-16.79-34.452-34.179 0-16.79 17.529-34.18 34.452-34.18 25.99 0 42.918 16.85 42.918 34.18 0 17.39-16.928 34.18-42.918 34.18z m188.165 0c-16.984 0-33.972-16.79-33.972-34.179 0-16.79 16.927-34.18 33.972-34.18 25.93 0 42.913 16.85 42.913 34.18 0 17.39-16.983 34.18-42.913 34.18z" fill="#09BB07" p-id="5607"></path>
            </svg>
          </div>
          <span class="text-xs pt-2" style="color:#646566;">微信好友</span>
        </van-col>
        <van-col span="8" class="flex flex-col items-center justify-center">
          <div class="flex items-center justify-center w-14 h-14 border border-gray-100 rounded-xl" @click="copyUrl">
            <van-icon size="24" class="font-bold" color="#ee8255" name="link-o" />
          </div>
          <span class="text-xs pt-2" style="color:#646566;">复制链接</span>
        </van-col>
      </van-row>
    </van-popup>

    <van-overlay :show="shareWechatShow" @click="shareWechatShow = false">
      <div class="wrapper">
        <div class="flex flex-col items-center pt-20" style="height: 100vh">
          <van-image
              :src="arrowUrl"
              width="80%"
              fit="cover"
          />
          <van-image
              class="pt-10"
              :src="knowUrl"
              width="40%"
              fit="cover"
          />
        </div>
      </div>
    </van-overlay>


    <!-- 底部弹出公众号二维码 -->
    <van-dialog v-model:show="showWechatQrcode"
                title="长按识别二维码关注"
                show-cancel-button
                @close="dialogWechatClose"
                :showConfirmButton="false" width="70%">
      <div class="flex justify-center items-center">
        <van-image :src="dataInfo.wechatQrcode" fit="contain" />
      </div>
    </van-dialog>

    <!-- 底部弹出企微二维码 -->
    <van-dialog v-model:show="showWorkQrcode"
                title="长按识别二维码"
                show-cancel-button
                @close="dialogWorkClose"
                :showConfirmButton="false" width="70%">
      <div class="flex justify-center items-center">
        <van-image :src="dataInfo.workQrcode" fit="contain" />
      </div>
    </van-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref,onMounted } from 'vue'
import {useRoute} from "vue-router";
import {isWeChatBrowser} from "@/utils/wechatAuth.ts";
// import {initWechat, openLocation,getLocation} from "@/utils/wechat.ts";
import {initWechat, openLocation} from "@/utils/wechat.ts";
import { copyText } from "@/utils/copy";
import aggList from "@/views/components/aggList/AggList.vue";
import {getUserInfo ,userInfoType} from "@/api/user.ts";
const aggListUuid = "5wY6atpRGTmtZcpv445QcX";

const route = useRoute();
const customerUuid = route.params.customerUuid as string;
const saleUuid = route.params.saleUuid as string

const isWeChat=  isWeChatBrowser()


const showContactUsPopup = ref(false);
const showSharePopup = ref(false);
const showWechatQrcode = ref(false);
const showWorkQrcode = ref(false);
const shareWechatShow = ref(false);

const knowUrl = ref("/upload/common/work/know.webp")
const arrowUrl = ref("/upload/common/work/arrow.webp")

const  dataInfo = ref<userInfoType>({
  name:"",
  mobile:"",
  headimgurl:"",
  company:"",
  position:"",
  view:0,
  likes:0,
  wechatQrcode:"",
  workQrcode:"",
  information:{
    backgroundImage:"https://staging.jingsocial.com/upload/images/168689180243009.jpeg",
    logo:"",
    desc:"",
    website:"",
    location:{
      latitude: 39.908823,
      longitude: 116.397470,
      name: '北京天安门',
      address: '北京市东城区天安门广场',
      scale: 14,
      infoUrl: 'https://www.baidu.com'
    }
  }
})

const title = ref("刘德华（售后服务）")
const desc = ref("拥有7年帮助中小企业提升在线影响力的经验。专注于SEO、内容营销和社交媒体策略，致力于为客户带来实际的业务增长。")
const imgUrl = ref("https://www.shuangying.tech/upload/33/1/mcb4Jm6NtTwrcvDEz4CSb.jpg")

onMounted(() => {
  userInfo()
  initWechat(title.value,desc.value,imgUrl.value)
});

const userInfo = async ()=>{
  try {
    await getUserInfo(saleUuid).then((response) => {
      if(response.data){
        dataInfo.value = response.data
        showWorkQrcode.value = true
      }
    })
  } catch (e) {
    console.log(e);
  } finally {

  }
}

const likes = ()=>{
  console.log("点赞")
}

const  shareCard = ()=>{
  showSharePopup.value = true
  console.log("分享卡片")
}

const dialogWechatClose=()=>{

}
const dialogWorkClose=()=>{

}

const shareWechat = () => {
  console.log("分享到微信")
  showSharePopup.value = false
  shareWechatShow.value = true
}
const goToAddress = ()=>{
  openLocation(dataInfo.value.information.location)
}


// const getAddress = ()=>{
//   getLocation()
// }


const goToWebsite =()=>{
  window.location.href = dataInfo.value.information.website;
}

const subscribeWechat = () =>{
  showWechatQrcode.value = true
}

const contactUs = () =>{
  showContactUsPopup.value=true
}
const callMobile=()=>{
  window.location.href = `tel:${dataInfo.value.mobile}`;
}



const copyMobile = (mobile:string) => {
  copyText(mobile)
  showContactUsPopup.value = false;
}


const copyUrl = () => {
  copyText(window.location.href)
  showSharePopup.value = false;
}

const addWork=()=>{
  console.log("添加企微")
  showContactUsPopup.value = false
  showWorkQrcode.value = true
}



</script>

<style scoped>
/* 这里可以添加你的自定义样式 */
</style>
